<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移动登录</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
    #app{
      margin-top: 5%;
      font-weight: 800;
      color: rgb(109, 107, 107);
    }
    h1,h3{
      text-align: center;
    }
    h3{
      color: cornflowerblue;
      margin-bottom: 7%;
    }
    .hang{
      /* margin-bottom: 30px; */
      /* margin-left: 15%; */
    }
    .sheng{
      width: 100%;
      position: relative;
      bottom: 20px;
    }
    .zux{
      margin-top: 6%;
      display: flex;
      align-items: center;
      /* margin-bottom: 15%;
      margin-left: 40%; */
    }
    .zuda{
      margin-top: 2%;
      /* margin-left: 30%; */
    }
    .text{
      /* position: relative; */
      /* margin-top: 8px; */
    }
    .xg{
      /* margin-bottom: 10px; */
    }
    .ff{
      /* margin-right: 5px; */
    }
    .xia{
      /* position: relative;
      bottom: 20px; */
    }
    .a{
      display: flex;
      /* 排序方式由上到下 */
      flex-direction: column; 
      /*  */
      align-items: center;
    }
    /* .hang2{
      margin-left: 10%;
    } */
  </style>
</head>
<body>
  <div id="app">
    <el-form :model="yhForm" :rules="rules" ref="yhForm" class="demo-ruleForm">
      <el-row class="a">
        <el-col :xs="24" :sm="24" :md="4" :lg="16" :xl="1" class="title">
          <h1>社区营销</h2>
          <h3>请登记您的信息</h3>
        </el-col>
        <el-col :xs="17" :sm="24" :md="4" :lg="8" :xl="1" class="hang">
          <!-- <el-form :model="yhForm" :rules="rules" ref="yhForm" class="demo-ruleForm"> -->
            <el-form-item label="用户姓名" prop="name" class="text">
              <el-input v-model="yhForm.name"></el-input>
            </el-form-item>
          <!-- <el-col :xs="5" :sm="24" :md="4" :lg="2" :xl="1"> 
            <el-form-item label="活动名称" prop="name" class="text">
          </el-col>
          <el-col :xs="13" :sm="24" :md="4" :lg="10" :xl="1">
              <el-input v-model="yhForm.name" placeholder="请输入内容"></el-input>
          </el-col> -->
        </el-col>
        <el-col :xs="17" :sm="24" :md="4" :lg="8" :xl="1" class="hang">
          <!-- <el-col :xs="5" :sm="24" :md="4" :lg="2" :xl="1"> 
            <div class="text">用户电话</div>
          </el-col>
          <el-col :xs="13" :sm="24" :md="4" :lg="10" :xl="1">
            <el-input v-model="yhForm.pon" placeholder="请输入内容"></el-input>
          </el-col> -->
  
          <!-- <el-form :model="yhForm" :rules="rules" ref="yhForm" class="demo-ruleForm"> -->
            <el-form-item label="用户电话" prop="pon" class="text">
              <el-input v-model.number="yhForm.pon" autocomplete="off"></el-input>
            </el-form-item>
          <!-- </el-form> -->
        </el-col>
  
        
        <el-col :xs="17" :sm="24" :md="4" :lg="8" :xl="1" class="hang">
          <!-- <el-form :model="yhForm" :rules="rules" ref="yhForm" class="demo-ruleForm"> -->
            <el-form-item label="省/市/区" prop="yhForm.qu" class="text" required>
              <el-cascader :options="options" v-model="value":props="{ value: 'label' }" style="width: 100%;"></el-cascader>
            </el-form-item>
          <!-- </el-form> -->
        </el-col>
        <!-- <el-col :xs="23" :sm="24" :md="4" :lg="16" :xl="1" class="hang">
          <el-col :xs="5" :sm="24" :md="4" :lg="2" :xl="1"> 
            <div class="text">街道</div>
          </el-col>
          <el-col :xs="13" :sm="24" :md="4" :lg="10" :xl="1">
            <el-input v-model="yhForm.jd" placeholder="请输入内容"></el-input>
          </el-col>
        </el-col> -->
        <el-col :xs="17" :sm="24" :md="4" :lg="8" :xl="1" class="hang">
          <!-- <el-form :model="yhForm" :rules="rules" ref="yhForm" class="demo-ruleForm"> -->
            <el-form-item label="社区" prop="yhForm.seq" class="text" required>
              <el-col >
              <el-select v-model="seq" filterable placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in seq" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item> 
          <!-- </el-form> -->
          </el-col>
        </el-col>
        <el-col :xs="17" :sm="24" :md="4" :lg="8" :xl="1" class="hang">
          <!-- <el-col :xs="24" :sm="24" :md="4" :lg="2" :xl="1">  -->
            <!-- <el-form :model="yhForm" :rules="rules" ref="yhForm" class="demo-ruleForm"> -->
             
            <!-- </el-form> -->
          <!-- </el-col> -->
          <el-form-item label="详细地址" prop="yhForm.seq" required>
            <el-col :xs="24" :sm="24" :md="4" :lg="24" :xl="1" class="xia">
              <el-col :xs="12" :sm="24" :md="4" :lg="12" :xl="1">
                <el-select v-model="lou1" style="width: 100%;" filterable placeholder="楼号" class="ff">
                  <el-option v-for="item in lou" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="12" :sm="24" :md="4" :lg="12" :xl="1">
                <el-select v-model="dan" style="width: 100%;" filterable placeholder="单元">
                  <el-option v-for="item in dan" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :xs="24" :sm="24" :md="4" :lg="24" :xl="1">
              <el-col :xs="12" :sm="24" :md="4" :lg="12" :xl="1">
                <el-select v-model="ceng"  style="width: 100%;" filterable placeholder="层数" class="ff">
                  <el-option v-for="item in ceng" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="12" :sm="24" :md="4" :lg="12" :xl="1">
                <el-select v-model="hu" style="width: 100%;" filterable placeholder="户号" class="ff">
                  <el-option v-for="item in hu" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-col> 
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="4" :lg="0" :xl="1" style="display: flex; justify-content: center; padding-bottom: 40px;"> 
          <el-button type="primary" :plain="true" @click="onSubmit" class="zux">立即注册</el-button>
        </el-col>
        <el-col :xs="0" :sm="24" :md="4" :lg="24" :xl="1"> 
          <el-button type="primary" :plain="true" @click="onSubmit" class="zuda">立即注册</el-button>
        </el-col>
      </el-row>
    </el-form>
  <!-- </el-form> -->
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>
    //    * 获取日期 年-月-日 时:分:秒
//  * @returns {}
//  */
function getYMDHMSDate(oDate) {
    if (oDate != null) {
       var data = new Date(oDate);
    } else {
        var data = new Date();
    }
    let m = data.getMonth() + 1;
    let d = data.getDate();
    let H = data.getHours();
    let M = data.getMinutes();
    let S = data.getSeconds();
    if (m < 10) {
        m = "0" + m
    }
    if (d < 10) {
       d = "0" + d
    }
    if (H < 10) {
        H = "0" + H
    }
    if (M < 10) {
       M = "0" + M
    }
    if (S < 10) {
        S = "0" + S
    }
    return data.getFullYear() + "-" + m + "-" + d + " " + H + ":" + M + ":" + S}
var a = new Vue({
    el: '#app',
    data() {
      return{
        radio: '1',
        value:'',
        options: [{}],
        add:[],
        lou:[{
         value: '选项1',
         label: '黄金糕'
         }], 
        dan:[{
          value: '选项1',
          label: '黄金糕'
        }],  
        ceng:[{
          value: '选项1',
          label: '黄金糕'
        }],  
        hu:[{
          value: '选项1',
          label: '黄金糕'
        }], 
        seq:[{
          value: '选项1',
          label: '黄金糕'
        }], 
        lou1:'',
        dan:[],
        ceng:[],
        hu:[], 
        seq:[],
        rules: {
          name: [
            { required: true, message: '请输入您的姓名', trigger: 'blur' },
            { min: 3, message: '长度在 2 个字符以上', trigger: 'blur' }
          ],
          pon:[
          { required: true, message: '请输入您的电话', trigger: 'blur' },
          { type: 'number', message: '电话必须为数字值'},
          { min: 11, message: '长度在 11 个字符以内', trigger: 'blur' }
          ],
          seq: [
            { required: true, message: '请选择您的地址', trigger: 'blur' }
          ],
        },
        yhForm: {
        id:'',
        date:'',
        name: '',
        pon: '',
        address:'',
        jd:'',
        seq:'',
        xx:'',
        zhuang:'未识别',
        yqr:'',
        yqm:'',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        value:[],
        sheng:'',
        shi:'',
        qu:'',
        },
      }
    },
    mounted() {
      $.ajax({
      url:'./city.json',
      type: 'get',
      success:(a) =>{       //  成功返回值     
           this.options = a
          },
          error:(err)=>{          //  失败调用，200交互成功，500服务器出问题了，304权限不够，404不存在，405 get/post请求问题
            console.log(err);
          },
      })
    },
    methods: {
      onSubmit() {
        window.scrollTo(0, 0);
        this.$message({
          message: '注册已提交，请等待审核',
          type: 'success'
        });
        console.log(this.value);
        this.yhForm.sheng = this.value[0]
        this.yhForm.shi = this.value[1]
        this.yhForm.qu = this.value[2]
        this.yhForm.date = getYMDHMSDate()
        this.yhForm.zhuang = '未识别'
        this.yhForm.address = this.yhForm.sheng + this.yhForm.shi + this.yhForm.qu + this.yhForm.jd + this.yhForm.seq + this.yhForm.xx
        this.add.push(this.yhForm)
        console.log(this.add,'add');
        
        $.ajax({
          headers:{
            'Content-Type':'application/x-www-form-urlencoded',
            Accesstoken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTU3NjY3OCwiaWF0IjoxNzMxNTczMDc4LCJqdGkiOiI2ZTFkOTQyZi03N2MxLTRmYWEtOGFjMy00YWJiZjU4NTc4Y2IifQ.nhQ6Dh2dsnIlFev-VVA3vE2CE6bX88DWMjWKGgbfNDMAgXNBqTuahaOAT1ahqLQ1xSh1rbm1LR6tqCBv4ikmkH9TKm_QkybBoGO8vm2oOpldeAp1INyKoTfF2MOH44RJjBCkfr-r9Y1qrCzi4lqHOFvK217F7oKBcV5gnemw4Z-YcA7X5vmarzVbu-8g46TSoJtoGCXgeahhdd__0cz1UkEsSVwvdyHse1yXg_QohcR4ghRkS2X5H4yVzDD3uhJtiiLqyrDnLO_65_XVu3ca7PpTEMXsxECYDFEAZ-95fDDbZ6j6JNtzFva6zjV0N8DUus84ep1CGOBZkp2PuljuDg',
          },
          url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalSave',
            type: 'POST',
            data:{   
            Data:JSON.stringify({"Add":{"usertable": this.add}}) ,
          },
          success:(add)=>{
          },
          error:(err)=>{          //  失败调用，200交互成功，500服务器出问题了，304权限不够，404不存在，405 get/post请求问题
            console.log(err);
          },
          dataType:'json' //转数据格式  
        })
      }
    },
  })

</script>
</html>